<div>
  @if (formResetToggle) {
    <form [attr.autocomplete]="isGeneralEditor ? 'NaN' : null" name="userInfoForm" #f="ngForm" novalidate
          (ngSubmit)="f.form.valid ? save() : showValidationAlerts()">
      <div class="row">
        <label [class.col-lg-3]="isViewOnly()" [class.col-lg-2]="!isViewOnly()" class="col-form-label" for="jobTitle-{{uniqueId}}">
          {{'users.editor.JobTitle' | translate}}
        </label>
        @if (isEditMode) {
          <div [class.col-lg-9]="isViewOnly()" [class.col-lg-10]="!isViewOnly()">
            <input appAutofocus type="text" attr.id="jobTitle-{{uniqueId}}" name="jobTitle"
                   placeholder="Enter Job Title" class="form-control" [(ngModel)]="userEdit.jobTitle" />
          </div>
        }
        @else {
          <div [class.col-lg-9]="isViewOnly()" [class.col-lg-10]="!isViewOnly()">
            <p class="form-control-plaintext">{{user.jobTitle}}</p>
          </div>
        }
      </div>
      <div class="row">
        <div class="col-lg-12">
          <hr class="hr-separator" [class.info-separator]="!isEditMode" [class.edit-separator]="isEditMode" />
        </div>
      </div>
      <div class="row">
        <label [class.col-lg-3]="isViewOnly()" [class.col-lg-2]="!isViewOnly()" class="col-form-label" for="userName-{{uniqueId}}">
          {{'users.editor.UserName' | translate}}
        </label>
        @if (isEditMode) {
          <div [class.col-lg-9]="isViewOnly()" [class.col-lg-10]="!isViewOnly()">
            <input type="text" attr.id="userName-{{uniqueId}}" name="userName" class="form-control"
                   [attr.autocomplete]="isGeneralEditor ? 'new-password' : null" placeholder="Enter user name"
                   [ngClass]="{'is-valid': f.submitted && userName.valid, 'is-invalid' : f.submitted && !userName.valid}"
                   [(ngModel)]="userEdit.userName" #userName="ngModel" required minlength="2" maxlength="200" />
            @if (showValidationErrors && f.submitted && !userName.valid) {
              <span class="invalid-feedback">
                {{'users.editor.UserNameRequired' | translate}}
              </span>
            }
          </div>
        }
        @else {
          <div [class.col-lg-9]="isViewOnly()" [class.col-lg-10]="!isViewOnly()">
            <p class="form-control-plaintext">{{user.userName}}</p>
          </div>
        }
      </div>
      @if (isEditMode && isEditingSelf && !isChangePassword && user.userName !== userEdit.userName) {
        <div class="row">
          <div class="col-lg-12">
            <hr class="hr-password-separator" />
          </div>
        </div>

        <div class="row">
          <label class="col-form-label col-lg-2" for="userPassword-{{uniqueId}}">
            {{'users.editor.Password' | translate}}
          </label>
          <div class="col-lg-10">
            <input type="password" attr.id="userPassword-{{uniqueId}}" name="userPassword" class="form-control"
                   [attr.autocomplete]="isGeneralEditor ? 'new-password' : null" placeholder="Enter password"
                   [ngClass]="{'is-valid': f.submitted && userPassword.valid, 'is-invalid' : f.submitted && !userPassword.valid}"
                   [(ngModel)]="userEdit.currentPassword" #userPassword="ngModel" required />
            <small class="hint-sm">{{'users.editor.PasswordHint' | translate}}</small>
            @if (showValidationErrors && f.submitted && !userPassword.valid) {
              <span class="invalid-feedback">
                {{'users.editor.CurrentPasswordRequired' | translate}}
              </span>
            }
          </div>
        </div>
      }
      <div class="row">
        <div class="col-lg-12">
          <hr class="hr-separator" [class.info-separator]="!isEditMode" [class.edit-separator]="isEditMode" />
        </div>
      </div>
      <div class="row">
        <label [class.col-lg-3]="isViewOnly()" [class.col-lg-2]="!isViewOnly()" class="col-form-label" for="email-{{uniqueId}}">
          {{'users.editor.Email' | translate}}
        </label>
        @if (isEditMode) {
          <div [class.col-lg-9]="isViewOnly()" [class.col-lg-10]="!isViewOnly()">
            <input type="text" attr.id="email-{{uniqueId}}" name="email" placeholder="Enter email address"
                   [ngClass]="{'is-valid': f.submitted && email.valid, 'is-invalid' : f.submitted && !email.valid}"
                   class="form-control" [(ngModel)]="userEdit.email" #email="ngModel" required maxlength="200"
                   pattern="^[a-zA-Z0-9_.+\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-.]+$" />
            @if (showValidationErrors && f.submitted && email.errors?.['required']) {
              <span class="invalid-feedback">
                {{'users.editor.EmailRequired' | translate}}
              </span>
            }
            @else if (showValidationErrors && f.submitted && email.errors?.['pattern']) {
              <span class="invalid-feedback">
                {{'users.editor.InvalidEmail' | translate}}
              </span>
            }
          </div>
        }
        @else {
          <div [class.col-lg-9]="isViewOnly()" [class.col-lg-10]="!isViewOnly()">
            <p class="form-control-plaintext">{{user.email}}</p>
          </div>
        }
      </div>
      @if (isEditMode) {
        <div class="row">
          <div class="col-lg-12">
            <hr class="hr-separator" [class.info-separator]="!isEditMode" [class.edit-separator]="isEditMode" />
          </div>
        </div>

        <div class="row">
          <label for="newPassword-{{uniqueId}}" class="col-form-label col-lg-2">
            {{'users.editor.Password' | translate}}
          </label>
          @if (!isChangePassword && !isNewUser) {
            <div class="col-lg-10">
              <button type="button" (click)="changePassword()" class="btn btn-link text-link">
                {{'users.editor.ChangePassword' | translate}}
              </button>
            </div>
          }
          @else {
            <div class="col-lg-10">
              <div class="password-well card card-body bg-light">
                @if (isEditingSelf) {
                  <div class="row">
                    <label class="col-form-label col-lg-3" for="currentPassword-{{uniqueId}}">
                      {{'users.editor.CurrentPassword' | translate}}
                    </label>
                    <div class="col-lg-9">
                      <input type="password" attr.id="currentPassword-{{uniqueId}}" name="currentPassword"
                             [attr.autocomplete]="isGeneralEditor ? 'new-password' : null"
                             placeholder="Enter current password" class="form-control"
                             [ngClass]="{'is-valid': f.submitted && currentPassword.valid, 'is-invalid' : f.submitted && !currentPassword.valid}"
                             [(ngModel)]="userEdit.currentPassword" #currentPassword="ngModel" required />
                      @if (showValidationErrors && f.submitted && !currentPassword.valid) {
                        <span class="invalid-feedback">
                          {{'users.editor.CurrentPasswordRequired' | translate}}
                        </span>
                      }
                    </div>
                  </div>
                }
                @if (!isNewUser) {
                  <div class="row">
                    <div class="col-lg-12">
                      <hr class="hr-password-separator" />
                    </div>
                  </div>
                }
                <div class="row">
                  <label class="col-form-label col-lg-3" for="newPassword-{{uniqueId}}">
                    {{'users.editor.NewPassword' | translate}}
                  </label>
                  <div class="col-lg-9">
                    <input type="password" attr.id="newPassword-{{uniqueId}}" name="newPassword"
                           [attr.autocomplete]="isGeneralEditor ? 'new-password' : null"
                           placeholder="Enter new password" class="form-control"
                           [ngClass]="{'is-valid': f.submitted && newPassword.valid, 'is-invalid' : f.submitted && !newPassword.valid}"
                           [(ngModel)]="userEdit.newPassword" #newPassword="ngModel"
                           required minlength="6" appValidateEqual="confirmPassword" reverse="true" />
                    @if (showValidationErrors && f.submitted && !newPassword.valid) {
                      <span class="invalid-feedback">
                        {{'users.editor.NewPasswordRequired' | translate}}
                      </span>
                    }
                  </div>
                </div>
                <div class="row">
                  <div class="col-lg-12">
                    <hr class="hr-password-separator" />
                  </div>
                </div>
                <div class="row">
                  <label class="col-form-label col-lg-3" for="confirmPassword-{{uniqueId}}">
                    {{'users.editor.ConfirmPassword' | translate}}
                  </label>
                  <div class="col-lg-9">
                    <input type="password" attr.id="confirmPassword-{{uniqueId}}" name="confirmPassword"
                           [attr.autocomplete]="isGeneralEditor ? 'new-password' : null" placeholder="Confirm new password"
                           class="form-control"
                           [ngClass]="{'is-valid': f.submitted && confirmPassword.valid, 'is-invalid' : f.submitted && !confirmPassword.valid}"
                           [(ngModel)]="userEdit.confirmPassword" #confirmPassword="ngModel"
                           required appValidateEqual="newPassword" />
                    @if (showValidationErrors && f.submitted && confirmPassword.errors?.['required']) {
                      <span class="invalid-feedback">
                        {{'users.editor.ConfirmationPasswordRequired' | translate}}
                      </span>
                    }
                    @else if (showValidationErrors && f.submitted && confirmPassword.errors?.['validateEqual']) {
                      <span class="invalid-feedback">
                        {{'users.editor.PasswordMismatch' | translate}}
                      </span>
                    }
                  </div>
                </div>
              </div>
            </div>
          }
        </div>
      }
      <!--******************************************************************************************************-->
      @if (!isEditMode || canAssignRoles) {
        <div class="row">
          <div class="col-lg-12">
            <hr class="hr-separator" [class.info-separator]="!isEditMode" [class.edit-separator]="isEditMode" />
          </div>
        </div>

        <div class="row">
          <label [class.col-lg-3]="isViewOnly()" [class.col-lg-2]="!isViewOnly()" class="col-form-label" for="roles-user-info">
            {{'users.editor.Roles' | translate}}
          </label>
          @if (!isEditMode) {
            <div [class.col-lg-9]="isViewOnly()" [class.col-lg-10]="!isViewOnly()">
              <p ngPreserveWhitespaces class="form-control-plaintext">
                @for (role of user.roles; track role) {
                  <span>
                    <span title='{{getRoleByName(role)?.description}}' class="badge rounded-pill bg-secondary">{{role}}</span>
                  </span>
                }
              </p>
            </div>
          }
          @if (isEditMode && canAssignRoles) {
            <div [ngClass]="{'is-valid': f.submitted && roles.valid, 'is-invalid' : f.submitted && !roles.valid}"
                 [class.col-lg-9]="isViewOnly()" [class.col-lg-10]="!isViewOnly()">
              <ng-select id="roles-user-info" name="roles" [items]="allRoles" bindLabel="name" bindValue="name"
                         [multiple]="true" [closeOnSelect]="false" placeholder="Select Roles" [(ngModel)]="userEdit.roles"
                         #roles="ngModel" class="form-control left-status pill-items" required>
                <ng-template ng-label-tmp let-item="item" let-clear="clear">
                  <span title='{{item.description}}' class='badge rounded-pill bg-secondary'>
                    {{item.name}}<span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
                  </span>
                </ng-template>
                <ng-template ng-option-tmp let-item="item">
                  <span title='{{item.description}}' class='badge rounded-pill bg-secondary'>{{item.name}}</span>
                  <i class="fa fa-check d-none"></i>
                </ng-template>
              </ng-select>
              @if (showValidationErrors && f.submitted && !roles.valid) {
                <span class="invalid-feedback">
                  {{'users.editor.RoleRequired' | translate}}
                </span>
              }
            </div>
          }
        </div>
      }
      <!--******************************************************************************************************-->
      <div class="row">
        <div class="col-lg-12">
          <hr class="hr-separator" [class.info-separator]="!isEditMode" [class.edit-separator]="isEditMode" />
        </div>
      </div>
      <div class="row">
        <label [class.col-lg-3]="isViewOnly()" [class.col-lg-2]="!isViewOnly()" class="col-form-label" for="fullName-{{uniqueId}}">
          {{'users.editor.FullName' | translate}}
        </label>
        @if (isEditMode) {
          <div [class.col-lg-9]="isViewOnly()" [class.col-lg-10]="!isViewOnly()">
            <input type="text" attr.id="fullName-{{uniqueId}}" name="fullName" placeholder="Enter full name"
                   class="form-control" [(ngModel)]="userEdit.fullName" />
          </div>
        }
        @else {
          <div [class.col-lg-9]="isViewOnly()" [class.col-lg-10]="!isViewOnly()">
            <p class="form-control-plaintext">{{user.fullName}}</p>
          </div>
        }
      </div>
      <div class="row">
        <div class="col-lg-12">
          <hr class="hr-separator" [class.info-separator]="!isEditMode" [class.edit-separator]="isEditMode" />
        </div>
      </div>
      <div class="row">
        <label [class.col-lg-3]="isViewOnly()" [class.col-lg-2]="!isViewOnly()" class="col-form-label" for="phoneNumber-{{uniqueId}}">
          {{'users.editor.PhoneNumber' | translate}}
        </label>
        @if (isEditMode) {
          <div [class.col-lg-9]="isViewOnly()" [class.col-lg-10]="!isViewOnly()">
            <input type="text" attr.id="phoneNumber-{{uniqueId}}" name="phoneNumber" placeholder="Enter phone number"
                   class="form-control" [(ngModel)]="userEdit.phoneNumber" />
          </div>
        }
        @else {
          <div [class.col-lg-9]="isViewOnly()" [class.col-lg-10]="!isViewOnly()">
            <p class="form-control-plaintext">{{user.phoneNumber}}</p>
          </div>
        }
      </div>
      @if (!isViewOnly()) {
        <div class="row">
          <div class="col-lg-12">
            <hr class="hr-separator" [class.last-separator]="!isEditMode" [class.last-edit-separator]="isEditMode" />
          </div>
        </div>

        <div class="row">
          <div class="col-sm-5">
            @if (isGeneralEditor && isEditMode) {
              <div class="float-start">
                <div class="form-check user-enabled">
                  <input class="form-check-input" type="checkbox" id="idEnabled" name="isEnabled" [(ngModel)]="userEdit.isEnabled">
                  <label for="idEnabled" class="form-check-label">{{'users.editor.Enabled' | translate}}</label>
                </div>
                @if (userEdit.isLockedOut) {
                  <button type="button" (click)="unlockUser()" class="btn btn-warning unblock-user" [disabled]="isSaving">
                    <i class='fa fa-unlock-alt'></i> {{'users.editor.Unblock' | translate}}
                  </button>
                }
              </div>
            }
          </div>
          <div class="col-sm-7">
            <div ngPreserveWhitespaces class="float-end">
              @if (!isEditMode && isGeneralEditor) {
                <button type="button" (click)="close()" class="btn btn-outline-secondary">
                  <i class='fa fa-close'></i> {{'users.editor.Close' | translate}}
                </button>
              }
              @if (!isEditMode && !isGeneralEditor) {
                <button type="button" (click)="edit()" class="btn btn-outline-secondary">
                  <i class='fa fa-edit'></i> {{'users.editor.Edit' | translate}}
                </button>
              }
              @if (isEditMode) {
                <button type="button" (click)="cancel()" class="btn btn-danger" [disabled]="isSaving">
                  <i class='fa fa-times'></i> {{'users.editor.Cancel' | translate}}
                </button>

                <button type="submit" class="btn btn-primary" [disabled]="isSaving">
                  @if (isSaving) {
                    <i class='fa fa-circle-o-notch fa-spin'></i> {{'users.editor.Saving' | translate}}
                  }@else {
                    <i class='fa fa-save'></i> {{'users.editor.Save' | translate}}
                  }
                </button>
              }
            </div>
          </div>
        </div>
      }
      <div class="clearfix"></div>
    </form>
  }
</div>
